<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid red;" >

    </canvas>
    <script>
        let ball = {x:100,y:0,r:20,g:2,vx:4,vy:0,color:"blue"};
        
        window.onload=function(){
            let canvas = document.querySelector("canvas");
            canvas.width = 800;
            canvas.height = 600;
            let context = canvas.getContext("2d");           
            requestAnimationFrame(ani);
        }
        let i=0;
        function ani(){
            let context = canvas.getContext("2d"); 
            render(context);
            update();
            requestAnimationFrame(ani);
        }
        function update(){
            ball.x += ball.vx;
            ball.y += ball.vy;
            ball.vy +=ball.g;

            if(ball.y > 600-ball.r){
                ball.y = 600-ball.r;
                ball.vy = -ball.vy*0.6;
            }
            
            if(ball.y < ball.r){
                ball.y = ball.r;
                ball.vy = -ball.vy;
            }

            
            if(ball.x < ball.r){
                ball.x = ball.r;
                ball.vx = -ball.vx;
            } 

            if(ball.x > 800-ball.r){
                ball.x = 800-ball.r;
                ball.vx = -ball.vx;
            }
        }
        function render(cxt){
            cxt.clearRect(0,0,canvas.width,canvas.height);
            cxt.fillStyle=ball.color;
            cxt.beginPath();
            cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
            cxt.closePath();

            cxt.fill();
        }
    </script>
</body>
</html>
</canvas>